<template>
  <div class="cell-container">
    <div v-if="cells.length === 0" style="width:100%;padding-top:120px;">
      <el-empty description="暂无任何信息" />
    </div>
    <template v-else>
      <el-card v-for="(item,index) in cells" :key="index" style="margin:0.5%;width:24%;">
        <template slot="header">
          <div style="display:flex;align-items:center;">
            <span>{{ item.name }}</span>
            <div style="margin-left:auto;">
              <el-button type="primary" size="mini" @click="getOne(item)">编辑</el-button>
              <el-button type="danger" size="mini" @click="deleteOne(item)">删除</el-button>
            </div>
          </div>
        </template>
        <div class="valves-container">
          <dl v-for="(citem,cindex) in item.valves" :key="cindex">
            <dt><img src="https://img.intelirri.com/device/fm/d_run.png" alt=""></dt>
            <dd>{{ citem.name }}</dd>
          </dl>
        </div>
      </el-card>
    </template>
  </div>
</template>

<script>
export default {
  props: {
    cells: {
      type: Array,
      default() {
        return []
      }
    }
  },
  methods: {
    getOne(item) {
      this.$emit('getOne', item)
    },
    deleteOne(item) {
      this.$emit('deleteOne', item)
    }
  }
}
</script>

<style lang="scss" scoped>
.cell-container{
   display:flex;
   flex-wrap: wrap;
   padding:0 0.5% 0.5% 0.5%;
   max-height:800px;
   overflow-y:scroll;
}
.valves-container{
  display:flex;
  flex-wrap: wrap;
  padding-top:12px;
  dl{
    display:inline-block;
    width:25%;
    text-align: center;
    margin-bottom:24px;
    dt{
      img{
        width:32px;
        height:32px;
      }
    }
    dd{
      font-size:12px;
    }
  }
}
</style>
